<template>
	<view class="header">
		<view class="header-top">
			<view class="header-left">
				<view>预定位置: <text>后台数据</text></view>
				<view>预定时间: <text>后台数据</text></view>
				<view>订单金额: ￥<text>25.5</text>元</view>
			</view>
			<view class="header-right" @click="changeSeat">改签</view>
		</view>
		<view class="ft20">Tips:请提前五分钟到达自习室即可,太早了没有位置哦!</view>
	</view>
	<view class="content">
		<image></image>
	</view>
	<view class="code iconfont icon-erweima">扫描桌上二维码，开灯学习</view>
	<!-- 底部 -->
	<view class="footer">
		<view class="footer-top">使用说明</view>
		<view class="xiangqing">
			<view>
				1.预约时间段内，您可以进行打卡学习，打卡后您的座位灯光会保持开启，可以通过电源开关进行关闭
			</view>
			<view>
				2、预约时间结束后，灯光会自动熄灭，为了不影响下一位朋友使用，请您及时收拾物品离席。
			</view>
		</view>
	</view>
</template>

<script>
import { 
	reactive ,
	toRefs
} from 'vue'

export default {
	setup() {
		const data = reactive({
			changeSeat(){
				uni.navigateTo({
					url: '/pages/changeSeat/changeSeat'
				});
			}
		})
		return {...toRefs(data)}
	}
}
</script>

<style lang="scss">
	@import url('~@/static/fonts/iconfont.css');
	@mixin displayOpen {
		display: flex;
		justify-content: space-around;
	}
	@mixin alignCenter {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.header {
		box-sizing: border-box;
		padding: 30rpx;
		width: 750rpx;
		height: 300rpx;
		.header-top{
			font-size: 26rpx;
			@include displayOpen();
			.header-left {
				@include alignCenter();
				width: 400rpx;
				height: 200rpx;
				text {
					font-size: 24rpx;
					font-weight: 300;
				}
			}
			.header-right {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 80rpx;
				text-align: center;
				font-size: 24rpx;
				color: white;
				background: linear-gradient(to right,#9392D5, #B4B3F9);
				transform: translateY(60rpx);
			}
		}
		.ft20 {
			text-align: center;
			font-size: 24rpx;
			color:#B1B0B6;
		}

	}
	
	.content {
		width: 700rpx;
		height: 300rpx;
		background: linear-gradient(to right,#99999D, #DEDDE5);
		margin: 0 auto;
	}
	
	.code {
		width: 700rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 6rpx;
		color: white;
		margin: 20rpx auto;
		background: linear-gradient(to right,#9392D5, #B4B3F9);
	}
	
	.footer {
		width: 700rpx;
		margin: 80rpx auto;
		.footer-top {
			font-size: 28rpx;
		}
		.xiangqing {
			height: 200rpx;
			margin-top: 10rpx;
			font-size: 24rpx;
			background-color: #F2F2F2;
			box-sizing: border-box;
			padding: 10rpx;
			view {
				line-height: 40rpx;
				color: #BCBCC2;
			}
		}
	}
</style>
